<template>
	<view>
		<view class="head-box ss-flex-col">
			<view class="ss-flex ss-m-b-20">
				<view class="head-title ss-m-r-40 head-title-animation"> <text style="font-size: 25px; color: #3E3A39">欢迎您使用IM</text></view>
			</view>
		</view>
		<view>请点击下放 【快捷登录】 同意授权完成登录/注册</view>
		<view style="margin-top: 20rpx">
			<button class="ss-reset-button buy-btn ui-Success-Main" @click="wechatLogin" open-type="getPhoneNumber"
			        @getphonenumber="wechatLogin">
				<view class="ss-flex">
					<!--        <image class="auto-login-img" :src="sheep.$url.static('/image/weixin.svg')"/>-->
					<view>手机号快捷登录</view>
				</view>
			</button>
		</view>
    <!--<view style="margin-top: 10rpx">
      <button style="width: 100%; background-color: #f5f5f5; color: #000000; margin-right: 20rpx" class="ss-reset-button buy-btn ui-Success-Main"
              @click="showAuthModal('wechatMiniLogin')">
        <view class="ss-flex">
          <view>短信登录</view>
        </view>
      </button>
    </view>-->
    <!--<view style="margin-top: 10rpx">
      <button style="width: 100%; background-color: #f5f5f5; color: #000000; margin-right: 20rpx" class="ss-reset-button buy-btn ui-Success-Main"
              @click="showAccountLogin">
        <view class="ss-flex">
          <view>账号登录</view>
        </view>
      </button>
    </view>-->
		<view style="margin-top: 10rpx">
			<button style="width: 100%; background-color: #f5f5f5; color: #000000; margin-right: 20rpx" class="ss-reset-button buy-btn ui-Success-Main"
			        @click="closeAuthModal">
				<view class="ss-flex">
					<!--        <image class="auto-login-img" :src="sheep.$url.static('/image/weixin.svg')"/>-->
					<view>暂不登录</view>
				</view>
			</button>
		</view>


		<view class="agreement-text ss-flex" style="position: relative; margin-top: 20rpx">
			<radio-group
					@change="protocolChange"
					class="check-box ss-flex ss-col-center ss-p-l-10"
			>
				<label class="radio">
					<radio
							:checked="state.protocol"
							color="var(--ui-BG-Main)"
							style="transform: scale(0.8)"
					/>
				</label>
			</radio-group>
			请阅读并同意
			<text @click="onProtocol('user_protocol')">《用户协议》</text>
			与
			<text @click="onProtocol('private_protocol')">《隐私政策》</text>
			<!--<button class="btnStyle" open-type="contact">联系客服</button>-->
		</view>
	</view>
</template>

<script setup>
import sheep from '@/sheep'
import {computed,reactive} from "vue";
import {closeAuthModal, showAuthModal} from '@/sheep/hooks/useModal';

const appInfo = computed(() => sheep.$store('app').info);

const state = reactive({
	protocol: false,
});

//勾选协议
function protocolChange(val) {
	state.protocol = !state.protocol;
}

async function wechatLogin(e) {
	if (!state.protocol) {
		handleTip();
		return;
	}
	let prod = sheep.$platform.useProvider("wechat");
	console.log(prod, 'prod')
	const loginRes = await prod.login(e.detail);
	console.log('loginRes', loginRes)
	if (loginRes) {
		console.log(sheep.$store('user').isLogin, 'isLogin')
		sheep.$helper.toast('登录成功')
		closeAuthModal();
	}
}

function showAccountLogin() {
	showAuthModal('accountLogin')
}

// 查看协议
function onProtocol(id, title) {
	closeAuthModal();
	sheep.$router.go('/pages/public/richtext', {
		id,
		title,
	});
}

// 请先登录提示
function handleTip(){
	uni.showToast({
		title: "请勾选我已阅读并同意《用户协议》与《隐私政策》！",
		icon: "none",
		mask: true
	});
}

</script>


<style lang="scss" scoped>
.btnStyle{
	border: none;
	font-size: 15px;
	padding: 0 !important;
	color: #82ABCC;
	margin: 0;
	background-color: transparent;
	&::after{
		border:none;
	}
}
.agreement-text{
	justify-content: center;
	position: absolute;
	bottom: 0;
	margin-top: -20px;
	margin-bottom: 30px;
	width: calc(100% - 68rpx);
}
.buy-btn {
	width: 100%;
	height: 72rpx;
	font-weight: 500;
	font-size: 28rpx;

	border-radius: 40rpx;
	background: #F39800;
	color: $white;
}
.auto-login-img {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
}
</style>
